<script setup lang="ts">
import { ref } from 'vue';

const props = defineProps<{
  task: {
    id: string;
    name: string;
    status: string;
    result?: string;
  }
}>();

const emit = defineEmits(['update:task']);

const expanded = ref(false);
const editMode = ref(false);
const editedName = ref(props.task.name);

const toggleExpand = () => {
  expanded.value = !expanded.value;
  editMode.value = false;
};

const startEdit = () => {
  editMode.value = true;
  editedName.value = props.task.name;
};

const saveEdit = () => {
  if (editedName.value.trim()) {
    emit('update:task', {
      ...props.task,
      name: editedName.value
    });
    editMode.value = false;
  }
};

const cancelEdit = () => {
  editMode.value = false;
  editedName.value = props.task.name;
};
</script>

<template>
  <div class="task-item">
    <div class="task-header" @click="toggleExpand">
      <div class="task-name">{{ task.name }}</div>
      <div 
        class="task-status" 
        :class="{
          'completed': task.status === 'finished',
          'failed': task.status === 'failed',
          'running': task.status === 'running'
        }"
      >
        {{ task.status === 'finished' ? '完成' : 
           task.status === 'failed' ? '失败' : '进行中' }}
      </div>
    </div>
    <div v-if="expanded" class="task-details">
      <div v-if="!editMode" class="task-content">
        <div class="task-description">{{ task.name }}</div>
        <div v-if="task.result" class="task-result">
          <div class="result-label">执行结果:</div>
          <div class="result-content">{{ task.result }}</div>
        </div>
        <button @click.stop="startEdit" class="edit-btn">修改任务</button>
      </div>
      <div v-else class="task-edit">
        <input 
          type="text" 
          v-model="editedName" 
          class="edit-input"
          @keyup.enter="saveEdit"
        />
        <div class="edit-actions">
          <button @click.stop="saveEdit" class="save-edit-btn">保存</button>
          <button @click.stop="cancelEdit" class="cancel-edit-btn">取消</button>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.task-item {
  border: 1px solid #ddd;
  border-radius: 4px;
  margin-bottom: 10px;
  background-color: white;
}

.task-header {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  cursor: pointer;
  align-items: center;
}

.task-name {
  font-weight: bold;
}

.task-status {
  padding: 2px 8px;
  border-radius: 4px;
  background-color: #f0f0f0;
  font-size: 0.8em;
}

.task-status.completed {
  background-color: #d4edda;
  color: #155724;
}

.task-status.failed {
  background-color: #f8d7da;
  color: #721c24;
}

.task-status.running {
  background-color: #cce5ff;
  color: #004085;
}

.task-details {
  padding: 10px;
  border-top: 1px solid #ddd;
  background-color: #f9f9f9;
}

.task-content {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.task-description {
  font-size: 0.9em;
  color: #666;
}

.task-result {
  margin-top: 5px;
}

.result-label {
  font-weight: bold;
  margin-bottom: 3px;
}

.result-content {
  font-size: 0.9em;
  color: #666;
  white-space: pre-wrap;
}

.edit-btn {
  align-self: flex-start;
  padding: 5px 10px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  margin-top: 10px;
}

.edit-btn:hover {
  background-color: #45a049;
}

.task-edit {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.edit-input {
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
}

.edit-actions {
  display: flex;
  gap: 10px;
}

.save-edit-btn, .cancel-edit-btn {
  padding: 5px 10px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.save-edit-btn {
  background-color: #4CAF50;
  color: white;
}

.save-edit-btn:hover {
  background-color: #45a049;
}

.cancel-edit-btn {
  background-color: #f44336;
  color: white;
}

.cancel-edit-btn:hover {
  background-color: #d32f2f;
}
</style>